<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>短信供应商管理</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>

<body class="pear-container">
    <!-- 筛选表单区域 -->
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <!-- 供应商名称筛选 -->
                    <div class="layui-form-item layui-inline">
                        <label class="layui-form-label">供应商名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="sms_name" id="sms_name" placeholder="输入供应商名称" class="layui-input">
                        </div>
                    </div>
                    <!-- 供应商状态筛选 -->
                    <div class="layui-form-item layui-inline">
                        <label class="layui-form-label">供应商状态</label>
                        <div class="layui-input-inline">
                            <select name="is_active" id="is_active" lay-search>
                                <option value="">请下拉选择</option>
                                <option value="1">启用</option>
                                <option value="0">禁用</option>
                            </select>
                        </div>
                    </div>
                    <!-- 创建时间范围筛选 -->
                    <div class="layui-form-item layui-inline">
                        <label class="layui-form-label">创建时间</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="create_time_start" name="create_time_start"
                                placeholder="开始时间" readonly>
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="create_time_end" name="create_time_end"
                                placeholder="结束时间" readonly>
                        </div>
                    </div>
                    <br>
                    <!-- 搜索/重置按钮 -->
                    <div class="layui-form-item layui-inline">
                        <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="base-query">
                            <i class="layui-icon layui-icon-search"></i>
                            查询
                        </button>
                        <button type="reset" class="pear-btn pear-btn-md" id="reset-btn">
                            <i class="layui-icon layui-icon-refresh"></i>
                            重置
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- 表格展示区域 -->
    <div class="layui-card">
        <div class="layui-card-body">
            <table id="base-table" lay-filter="base-table"></table>
        </div>
    </div>

    <!-- 表格工具栏（新增供应商按钮） -->
    <script type="text/html" id="base-toolbar">
		<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add_provider">
	        <i class="layui-icon layui-icon-add-1"></i>
	        新增短信供应商
	    </button>
	</script>

    <!-- 表格操作列（编辑/删除/查看密钥按钮） -->
    <script type="text/html" id="base-bar">
		<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit">
			<i class="layui-icon layui-icon-edit"></i>编辑
		</button>
		<button class="pear-btn pear-btn-warning pear-btn-sm" lay-event="view_secret">
			<i class="layui-icon layui-icon-eye"></i>查看密钥
		</button>
		<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove">
			<i class="layui-icon layui-icon-delete"></i>删除
		</button>
	</script>

    <!-- 供应商状态格式化 -->
    <script type="text/html" id="base-isActive">
		{{#if (d.is_active == 1) { }}
			<i class="layui-icon layui-icon-face-smile" style="font-size: 20px; color: #1E9FFF;"><span>启用</span></i>  
		{{# }else if(d.is_active == 0){ }}
			<i class="layui-icon layui-icon-face-cry" style="font-size: 20px; color: #ff1e1e;"><span>禁用</span></i> 
		{{# } }}
	</script>

    <!-- 引入依赖JS -->
    <script src="../../component/com/api.js"></script>
    <script src="../../component/com/auth.js"></script>
    <script src="../../component/layui/layui.js"></script>
    <script src="../../component/pear/pear.js"></script>
    <script>
        layui.use(['table', 'form', 'jquery', 'common', 'laydate'], function () {
            let table = layui.table;
            let form = layui.form;
            let $ = layui.jquery;
            let common = layui.common;
            let laydate = layui.laydate;

            // 基础配置
            let MODULE_PATH = "config"; // 模块路径（对应新增/编辑页面）
            let API_BASE_URL = apiConfig.baseUrl;
            let token = window.localStorage.getItem("token") || window.sessionStorage.getItem("token");
            const SMS_PROVIDER_API = `${API_BASE_URL}/sms/provider/`; // 供应商接口地址

            // 1. 初始化日期选择器
            laydate.render({
                elem: '#create_time_start',
                type: 'datetime',
                format: 'yyyy-MM-dd HH:mm:ss',
                placeholder: '选择开始时间'
            });
            laydate.render({
                elem: '#create_time_end',
                type: 'datetime',
                format: 'yyyy-MM-dd HH:mm:ss',
                placeholder: '选择结束时间'
            });

            // 2. 表格列定义（匹配SMSProvider模型字段）
            const cols = [
                [{
                    type: 'checkbox'
                },
                {
                    title: '序号',
                    field: 'id',
                    align: 'left',
                    width: 80,
                },
                {
                    title: '供应商名称',
                    field: 'sms_name',
                    align: 'left',
                    width: 100,
                },
                {
                    title: '开发者账号(API Key)',
                    field: 'sms_key',
                    align: 'left',
                    width: 200,
                    // 账号脱敏显示（中间隐藏）
                    templet: function (d) {
                        if (d.sms_key && d.sms_key.length > 8) {
                            return d.sms_key.slice(0, 4) + '****' + d.sms_key.slice(-4);
                        }
                        return d.sms_key || '-';
                    }
                },
                {
                    title: '开发者密码(API Secret)',
                    field: 'sms_secret',
                    align: 'left',
                    width: 200,
                    // 密码默认显示星号，点击查看需弹窗
                    // templet: function () {
                    //     return '<span>（点击右侧查看密钥）</span>';
                    // }
                },
                {
                    title: '描述说明',
                    field: 'sms_description',
                    align: 'left',
                    width: 200,
                    // 描述过长时省略显示
                    templet: function (d) {
                        return d.sms_description ? (d.sms_description.length > 20 ? d.sms_description.slice(0, 20) + '...' : d.sms_description) : '<span></span>';
                    }
                },
                {
                    title: '状态',
                    field: 'is_active',
                    align: 'center',
                    width: 100,
                    templet: '#base-isActive'
                },
                {
                    title: '创建时间',
                    field: 'create_time',
                    align: 'center',
                    width: 180
                },
                {
                    title: '更新时间',
                    field: 'update_time',
                    align: 'center',
                    width: 180,
                    hide: true
                },
                {
                    title: '操作',
                    toolbar: '#base-bar',
                    align: 'center',
                    width: 300,
                    fixed: "right"
                }
                ]
            ];

            // 3. 渲染供应商表格
            table.render({
                elem: '#base-table',
                url: SMS_PROVIDER_API, // 供应商列表接口
                page: true,
                request: {
                    pageName: 'page',
                    limitName: 'limit'
                },
                limits: [10, 20, 30, 40, 50, 100],
                limit: 10,
                cols: cols,
                skin: 'line',
                toolbar: '#base-toolbar',
                headers: {
                    "Authorization": token
                },
                maxmin: true,// 关键新增：开启表格最大化/最小化功能
                parseData: function (res) {
                    return {
                        "code": res.success ? 0 : 1,
                        "msg": res.message || "操作成功",
                        "count": res.data?.count || 0,
                        "data": res.data?.results || [],
                        "curr": res.data?.current_page || 1
                    };
                },
                defaultToolbar: [{
                    title: '刷新',
                    layEvent: 'refresh',
                    icon: 'layui-icon-refresh',
                }, 'filter', 'print', 'exports'],
                // 表格加载失败处理
                error: function () {
                    layer.msg('表格加载失败，请检查接口或网络', { icon: 2, time: 2000 });
                }
            });

            // 4. 表格行操作事件（编辑/查看密钥/删除）
            table.on('tool(base-table)', function (obj) {
                const data = obj.data; // 当前行数据
                switch (obj.event) {
                    case "edit":
                        window.edit(data);
                        break;
                    case "view_secret":
                        window.viewSecret(data);
                        break;
                    case "remove":
                        window.remove(obj, data);
                        break;
                }
            });

            // 5. 表格工具栏事件（新增/刷新）
            table.on('toolbar(base-table)', function (obj) {
                switch (obj.event) {
                    case "add_provider":
                        window.add();
                        break;
                    case "refresh":
                        table.reload('base-table');
                        break;
                }
            });

            // 6. 筛选表单提交事件
            form.on('submit(base-query)', function (data) {
                // 处理筛选参数（空值过滤）
                const params = {};
                for (let key in data.field) {
                    if (data.field[key]?.trim()) {
                        params[key] = data.field[key].trim();
                    }
                }
                // 携带筛选参数刷新表格，并重置到第一页
                table.reload('base-table', {
                    where: params,
                    page: { curr: 1 }
                });
                return false;
            });

            // 7. 重置按钮事件（清空日期选择器+表单）
            $('#reset-btn').on('click', function () {
                $('#create_time_start').val('');
                $('#create_time_end').val('');
                // 延迟重置表单，确保日期输入框清空生效
                setTimeout(() => {
                    form.render();
                }, 100);
            });

            // 8. 新增供应商：打开新增弹窗
            window.add = function () {
                layer.open({
                    type: 2,
                    title: '新增短信供应商',
                    shade: 0.1,
                    area: [common.isModile() ? '100%' : '650px', common.isModile() ? '100%' : '450px'],
                    content: `${MODULE_PATH}/sms-provider-add.html`,
                    // 关闭弹窗后刷新表格
                    end: function () {
                        table.reload('base-table');
                    },
                    // 弹窗加载失败处理
                    error: function () {
                        layer.msg('新增页面加载失败，请检查路径', { icon: 2 });
                    }
                });
            }

            // 9. 编辑供应商：携带ID打开编辑弹窗
            window.edit = function (data) {
                if (!data.id) {
                    layer.msg('供应商ID不存在，无法编辑', { icon: 2 });
                    return;
                }
                layer.open({
                    type: 2,
                    title: `编辑短信供应商: [${data.sms_name}]`,
                    shade: 0.1,
                    area: [common.isModile() ? '100%' : '650px', common.isModile() ? '100%' : '450px'],
                    content: `${MODULE_PATH}/sms-provider-edit.html?id=${data.id}`,
                    // 关闭弹窗后刷新表格
                    end: function () {
                        table.reload('base-table');
                    },
                    error: function () {
                        layer.msg('编辑页面加载失败，请检查路径', { icon: 2 });
                    }
                });
            }

            // 10. 查看密钥：弹窗显示完整API Key和Secret
            window.viewSecret = function (data) {
                if (!data.sms_key || !data.sms_secret) {
                    layer.msg('该供应商未配置密钥', { icon: 3 });
                    return;
                }
                layer.open({
                    type: 1,
                    title: `[${data.sms_name}] 密钥信息`,
                    shade: 0.3,
                    area: [common.isModile() ? '90%' : '500px', 'auto'],
                    content: `
						<div style="padding: 20px;">
							<div class="layui-form-item">
								<label class="layui-form-label" style="width: 120px;">API Key</label>
								<div class="layui-input-block" style="margin-left: 150px;">
									<input type="text" value="${data.sms_key}" class="layui-input" readonly>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label" style="width: 120px;">API Secret</label>
								<div class="layui-input-block" style="margin-left: 150px;">
									<input type="text" value="${data.sms_secret}" class="layui-input" readonly>
								</div>
							</div>
							<div class="layui-form-item" style="color: #666; font-size: 12px; margin-top: 10px;">
								<i class="layui-icon layui-icon-info" style="color: #1E9FFF;"></i>
								提示：请妥善保管密钥信息，避免泄露
							</div>
						</div>
					`,
                    btn: ['复制密钥', '关闭'],
                    btn1: function (index) {
                        // 复制密钥到剪贴板（兼容新旧浏览器）
                        const text = `供应商名称: ${data.sms_name}\nAPI Key: ${data.sms_key}\nAPI Secret: ${data.sms_secret}`;
                        if (navigator.clipboard) {
                            // 现代浏览器：使用Clipboard API
                            navigator.clipboard.writeText(text).then(() => {
                                layer.msg('密钥已复制到剪贴板', { icon: 1 });
                            }).catch(() => {
                                layer.msg('复制失败，请手动复制', { icon: 2 });
                            });
                        } else {
                            // 旧浏览器：创建临时文本框实现复制
                            const tempInput = document.createElement('textarea');
                            tempInput.value = text;
                            document.body.appendChild(tempInput);
                            tempInput.select();
                            document.execCommand('copy');
                            document.body.removeChild(tempInput);
                            layer.msg('密钥已复制到剪贴板（旧浏览器兼容模式）', { icon: 1 });
                        }
                        layer.close(index); // 关闭弹窗
                    },
                    btn2: function (index) {
                        layer.close(index); // 点击“关闭”按钮关闭弹窗
                    }
                });
            }

            // 11. 删除供应商：调用后端删除接口（逻辑删除，检查关联模板）
            window.remove = function (obj, data) {
                if (!data.id) {
                    layer.msg('供应商ID不存在，无法删除', { icon: 2 });
                    return;
                }
                layer.confirm(`确定要删除供应商：[ ${data.sms_name} ] ？<br>注意：若该供应商已关联短信模板，将无法删除`, {
                    icon: 3,
                    title: '提示: 供应商删除',
                    skin: 'layui-layer-molv',
                    btnAlign: 'c' // 按钮居中显示
                }, function (index) {
                    layer.close(index); // 关闭确认弹窗
                    const loading = layer.load(2, { shade: 0.3, shadeClose: false }); // 加载动画

                    // 发送删除请求
                    $.ajax({
                        url: `${SMS_PROVIDER_API}${data.id}/`,
                        dataType: 'json',
                        type: 'DELETE',
                        headers: {
                            "Authorization": token
                        },
                        success: function (result) {
                            layer.close(loading); // 关闭加载动画
                            if (result.success) {
                                layer.msg(result.message || '供应商删除成功', {
                                    icon: 1,
                                    time: 1000
                                }, function () {
                                    obj.del(); // 从表格中删除当前行
                                });
                            } else {
                                // 后端返回业务错误（如已关联模板）
                                layer.msg(result.message || '删除失败，该供应商可能已关联短信模板', {
                                    icon: 2,
                                    time: 2000
                                });
                            }
                        },
                        error: function (xhr) {
                            layer.close(loading); // 关闭加载动画
                            // 处理网络错误或权限问题
                            const errorMsg = xhr.status === 401
                                ? '登录已过期，请重新登录后删除'
                                : `网络异常（${xhr.status}），删除失败`;
                            layer.msg(errorMsg, { icon: 2, time: 2000 });
                            // 登录过期则跳转登录页
                            if (xhr.status === 401) {
                                setTimeout(() => {
                                    parent.window.location.href = '../../login.html';
                                }, 2000);
                            }
                        }
                    });
                });
            }

            // 12. 页面初始化：检查Token是否存在（避免未登录访问）
            $(function () {
                if (!token) {
                    layer.msg('未检测到登录状态，请先登录', { icon: 2, time: 2000 });
                    setTimeout(() => {
                        window.location.href = '../../login.html';
                    }, 2000);
                }
            });
        });
    </script>
</body>

</html>